<!--
Copyright 2022 SNSJ LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to TabFloater</title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../css/tabfloater.css" />
    <link rel="stylesheet" href="../css/uk-switch.css" />
    <link rel="stylesheet" href="../css/generated/uk-tabfloater.css" />
    <script src="../libs/uikit/uikit.min.js"></script>
    <script src="../libs/uikit/uikit-icons.min.js"></script>
    <script type="module" src="../libs/webextension-polyfill/browser-polyfill.min.js"></script>
</head>

<body>
    <header>
        <div class="uk-section-xsmall uk-section-secondary uk-preserve-color">
            <div class="uk-container uk-container-medium">
                <div class="uk-grid-match" uk-grid>
                    <div>
                        <a href="https://www.tabfloater.io/" target="_blank">
                            <img data-src="../images/logo.png" width="245" alt="tabfloater_logo" uk-img>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div id="arrowDiv" class="uk-position-top-right uk-position-medium uk-animation-fade uk-animation-fast" hidden>
        <img src="../images/arrow.png" alt="arrow_to_icons" width="200" />
    </div>

    <section uk-height-viewport="expand: true">
        <div class="uk-container uk-container-small uk-padding">
            <h1>Welcome</h1>
            <div>
                Thank you for installing TabFloater. This short guide will help you get started.
            </div>

            <h2>1. Install the companion</h2>
            <div id="installCompanionDiv" class="uk-invisible">
                <div>
                    <b>Companion required</b> <span
                        class="uk-alert-warning uk-border-pill uk-padding-small uk-margin-left"
                        uk-icon="icon: warning"></span>
                    <p>
                        To utilize the full power of TabFloater, we strongly recommend that you install the companion
                        application.
                    </p>
                </div>
                <div>
                    <a href="https://www.tabfloater.io/download" target="_blank"
                        class="uk-button uk-button-default uk-border-pill uk-margin-right"
                        uk-icon="arrow-right">Download </a>
                    <a href="https://www.tabfloater.io/documentation#why-do-i-need-to-install-an-application-on-my-computer-to-use-tabfloater"
                        target="_blank">Why do I need this?</a>
                </div>
            </div>
            <div id="companionAlreadyInstalledDiv" hidden>
                <b>Companion installed</b> <span class="uk-alert-success uk-border-pill uk-padding-small uk-margin-left"
                    uk-icon="icon: check"></span>
            </div>

            <h2>2. Try it!</h2>
            <div>
                To float or unfloat a tab, click the TabFloater icon in the upper right corner:
                <img src="../images/icons/16.png" class="uk-margin-small-left">
                <div class="uk-margin-small-top">
                    <button class="uk-button uk-button-default uk-border-pill"
                        uk-toggle="target: #arrowDiv; mode: hover">Show me</button>
                </div>
                <p id="pinExtensionWarning" class="uk-inline">
                    <b>Note:</b> you may need to <span class="uk-link">pin the extension</span> to see the icon.
                <div uk-drop="pos: bottom-right; delay-hide: 0">
                    <div class="uk-card uk-card-default uk-card-small uk-card-body">
                        <img src="../images/pin.png" alt="pin_extension_help_screenshot">
                    </div>
                </div>
                </p>
            </div>

            <h2>3. Check out the options</h2>
            <div>
                Visit the options page to see what you can do with TabFloater.
                <ul class="uk-margin-small-top">
                    <li>Hotkeys: move the floating window with the keyboard</li>
                    <li>Smart Positioning: ensure the floating window doesn't cover up content</li>
                </ul>
                <button id="optionsButton" class="uk-button uk-button-default uk-border-pill"
                    uk-icon="arrow-right">Options </button>
                <p>
                    <b>Note:</b> this application collects anonymous usage statistics. You can opt-out on the options
                    page.
                </p>
            </div>

            <h2>4. Learn more</h2>
            <div>
                Check out our <a href="https://www.tabfloater.io/documentation" target="_blank">documentation</a> and <a
                    href="https://www.tabfloater.io/privacy" target="_blank">privacy policy</a> to learn more about
                TabFloater.
            </div>
    </section>

    <script src="../js/pages/welcome.js"></script>
</body>

</html>
